<!-- eslint-disable vue/no-mutating-props -->
<template>
  <card class="add-info-card" title="交车信息" toggle v-if="orderDetails.giveCarInfoDto">
    <div class="section-item">
      <div class="section-item-content">
        <a-descriptions :size="'medium'" :align="{ label: 'right' }">
          <a-descriptions-item label="交车时间">{{ orderDetails.giveCarInfoDto.useStartTime }}</a-descriptions-item>
          <a-descriptions-item label="交车人">{{ orderDetails.giveCarInfoDto.giveStaffName }}</a-descriptions-item>
          <a-descriptions-item label="交车里程">{{ unitVal(orderDetails.giveCarInfoDto.startCarMileage, '公里') }}</a-descriptions-item>
          <a-descriptions-item :span="3" label="交车油（电）量">{{
            orderDetails.giveCarInfoDto.startCarOil ? orderDetails.giveCarInfoDto.startCarOil : '-'
          }}</a-descriptions-item>
          <a-descriptions-item :span="3" label="交车里程/油(电)量照片">
            <upload-img v-model="orderDetails.giveCarInfoDto.giveMilesFileId" disabled margin />
          </a-descriptions-item>
          <a-descriptions-item :span="3" label="交车照片">
            <upload-img-ota
              v-if="orderDetails.giveCarInfoDto.giveOtaFileUrls.length"
              :fileList="orderDetails.giveCarInfoDto.giveOtaFileUrls"
              disabled
            />
            <upload-img
              v-if="
                orderDetails.giveCarInfoDto.giveFileIds.length ||
                (orderDetails.giveCarInfoDto.giveFileIds.length == 0 && orderDetails.giveCarInfoDto.giveOtaFileUrls.length == 0)
              "
              v-model="orderDetails.giveCarInfoDto.giveFileIds"
              disabled
              margin
            />
          </a-descriptions-item>
          <a-descriptions-item :span="3" label="交车视频">
            <upload-video-ota
              style="margin-bottom: 8px"
              v-if="orderDetails.giveCarInfoDto.giveVideoOtaFileUrls.length"
              :fileList="orderDetails.giveCarInfoDto.giveVideoOtaFileUrls"
              single
              disabled
            />
            <upload-video
              v-if="
                orderDetails.giveCarInfoDto.giveVideoFileIds.length ||
                (orderDetails.giveCarInfoDto.giveVideoFileIds.length == 0 && orderDetails.giveCarInfoDto.giveVideoOtaFileUrls.length == 0)
              "
              v-model="orderDetails.giveCarInfoDto.giveVideoFileIds"
              :max="1"
              disabled
            />
          </a-descriptions-item>
          <a-descriptions-item :span="3" label="交车备注">{{ orderDetails.giveCarInfoDto.useStartRemark }}</a-descriptions-item>
        </a-descriptions>
      </div>
    </div>
  </card>
  <card class="add-info-card" title="还车信息" toggle :showDivider="false" v-if="orderDetails.returnCarInfoDto">
    <div class="section-item">
      <div class="section-item-content">
        <a-descriptions :size="'medium'" :align="{ label: 'right' }">
          <a-descriptions-item label="还车时间">{{ orderDetails.returnCarInfoDto.useEndTime }}</a-descriptions-item>
          <a-descriptions-item label="还车人">{{ orderDetails.returnCarInfoDto.returnStaffName }}</a-descriptions-item>
          <a-descriptions-item label="还车里程">{{ unitVal(orderDetails.returnCarInfoDto.endCarMileage, '公里') }}</a-descriptions-item>
          <a-descriptions-item :span="3" label="还车油（电）量">{{
            orderDetails.returnCarInfoDto.endCarOil != null ? orderDetails.returnCarInfoDto.endCarOil : '-'
          }}</a-descriptions-item>
          <a-descriptions-item :span="3" label="还车里程/油(电)量照片">
            <upload-img v-model="orderDetails.returnCarInfoDto.returnMilesFileId" disabled margin />
          </a-descriptions-item>
          <a-descriptions-item :span="3" label="还车照片">
            <upload-img-ota
              v-if="orderDetails.returnCarInfoDto.returnOtaFileUrls.length"
              :fileList="orderDetails.returnCarInfoDto.returnOtaFileUrls"
              disabled
            />
            <upload-img
              v-if="
                orderDetails.returnCarInfoDto.returnFileIds.length ||
                (orderDetails.returnCarInfoDto.returnFileIds.length == 0 && orderDetails.returnCarInfoDto.returnOtaFileUrls.length == 0)
              "
              v-model="orderDetails.returnCarInfoDto.returnFileIds"
              disabled
              margin
            />
          </a-descriptions-item>
          <a-descriptions-item :span="3" label="还车视频">
            <upload-video-ota
              style="margin-bottom: 8px"
              v-if="orderDetails.returnCarInfoDto.returnVideoOtaFileUrls.length"
              :fileList="orderDetails.returnCarInfoDto.returnVideoOtaFileUrls"
              single
              disabled
            />
            <upload-video
              v-if="
                orderDetails.returnCarInfoDto.returnVideoFileIds.length ||
                (orderDetails.returnCarInfoDto.returnVideoFileIds.length == 0 &&
                  orderDetails.returnCarInfoDto.returnVideoOtaFileUrls.length == 0)
              "
              v-model="orderDetails.returnCarInfoDto.returnVideoFileIds"
              :max="1"
              disabled
            />
          </a-descriptions-item>
          <a-descriptions-item :span="3" label="还车备注">{{ orderDetails.returnCarInfoDto.useEndRemark }}</a-descriptions-item>
        </a-descriptions>
      </div>
    </div>
  </card>
  <a-empty style="margin-top: 20vh" v-if="!orderDetails.giveCarInfoDto" />
</template>

<script setup name="GiveReturnCar">
  import { unitVal } from '@/utils'
  import { onMounted, ref } from 'vue'
  import { getShortOrdrDetails } from '@/api/order/sOrder'

  const orderDetails = ref({})
  const props = defineProps({
    orderId: Number,
  })
  const getDetails = () => {
    getShortOrdrDetails({ id: props.orderId }).then((res) => {
      orderDetails.value = res.result.orderInfo
    })
  }

  onMounted(() => {
    getDetails()
  })
</script>
